<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>监听器用法</title>
	
	</head>
	<body>
		<div id="ap">
			<!-- 需求：
				 要求用户输入username的用户名，之后与服务器进行校验
				 如果已经存在给用户提示，如果不存在 则提示用户可用
			 -->
			用户名:<input type="text" v-model="username"/>
			{{msg}}
			
		</div>
		<script src="../js/vue.js"></script>
			
		<script>
			const app=new Vue({
				el:'#ap',
				data:{
					username:'',
					msg:''
				},
				methods:{
					checkName(username){
						//===严格意义的数据校验  新版本提倡这么写
						if(username === 'admin'){
							this.msg ="数据已存在"
						}else if(username === 'tom'){
							this.msg ="数据已存在"
						}else{
							this.msg ="数据可以使用"
						}
					}
				},
				watch:{
					//定义属性的监听器
					username(val){
						this.checkName(val)
					}
				}
			})
		</script>
	</body>
</html>
